<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>实时数据</title>
   <link href="<%=basePath%>scripts/miniui/themes/blue/skin.css"
	rel="stylesheet" type="text/css" />
	<script src="<%=basePath%>scripts/boot.js" type="text/javascript"></script>
	<script src="<%=basePath%>build/dist/echarts.js"></script>
  </head>
  <script type="text/javascript">
  function getUrl(name) {
	    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	    var r = window.location.search.substr(1).match(reg);
	    if (r != null) return unescape(r[2]); return null;
	    }
		var vehicleid = getUrl("vid");
		var vehiclename=getUrl("name");
		var timeTicket;
		var cs = 0;
		var soc = 0;
		var zs = 0;
		var motor_cur = 0;
		var motor_temp = 0;
		var bat_temp = 0;
		var flag=1;
		
		$(document).ready(function() {
			
			initVehicle_list();
			if(vehicleid!=""&&vehicleid!=null){
				var select=document.getElementById("vehicle_list")
				 for(var i=0;i<select.options.length;i++) {  
	           		if(select.options[i].value == vehicleid) {  
	                  select.options[i].selected = true;  
	                  break;  
           		 	}  
       			 }  
			}
			SelectCsYb();
			setInterval(function(){
				if(vehicleid!=null&&vehicleid!=0){
					SelectData();
				}
			}, 2000);
		});
		function initVehicle_list(){
			$.ajax({
				async: false,
				type : "post",
				url : "fleet/selectVehicleAll.do",
				//url : "http://LOCALHOST:8080/RMSAPP/jsp/selectVehicleByUser.jsp?userId=13",
				datatype: "JSON",
				success : function(data){
					var list = eval("(" + data + ")");
					var length=list.length;
					for(var i=0;i<length;i++){
						//var option = new Option(list[i].carname,list[i].vin);
						//document.getElementById("vehicle_list").options[i] = option;
						 $("#vehicle_list").append($("<option value=\""+list[i].vehicleid+"\">"+list[i].vehiclename+"</option>")); 
					}		
				},
				error:function(){
		     		mini.alert("error");
		  		}
			});
			$("#vehicle_list").change(function(){ 
				vehicleid=$("#vehicle_list").children('option:selected').val(); 
				if(vehicleid!=null&&vehicleid!=0){
					SelectData();
				}	
			});
		}
		function SelectData(){
			mini.mask({
	            el: document.body,
	            cls: 'mini-mask-loading',
	            html: '加载中'
	        });
			$.ajax({
				async: false,
				type : "post",
				url : "vehicle/selectAllByOne.do?vehicleid="+vehicleid,
				datatype: "json",
				success : function(data){
					var list = eval("(" + data + ")");
					mini.unmask(document.body);
					if(list[0].istock==1){
						$("#total_mileage").html(list[0].total_mileage);
						$("#endurance_mileage").html(list[0].endurance_mileage);
						$("#sensor_time").html(list[0].sensor_time);
						$("#charging_status").html(list[0].charging_status);
						$("#motor_cur").html(list[0].motor_cur);
						$("#motor_temp").html(list[0].motor_temp);
						$("#motor_nm").html(list[0].motor_nm);
						$("#bat_total_vol").html(list[0].bat_total_vol);
						$("#bat_total_cur").html(list[0].bat_total_cur);
						$("#bat_max_vol").html((list[0].bat_max_vol).toFixed(2));
						$("#bat_min_vol").html((list[0].bat_min_vol).toFixed(2));
						$("#batpage_max_temp").html(list[0].batpage_max_temp);
						$("#batpage_min_temp").html(list[0].batpage_min_temp);
						//图表
						cs=list[0].vehicle_speed;
						soc=list[0].soc;
						zx=list[0].motor_speed/1000;
					}
				}
			});
		}
		
		function SelectCsYb(){
			  // 路径配置
	        require.config({
	            paths: {
	                echarts: '<%=basePath%>build/dist'
	            }
	        });
	        // 使用
	        require(
	            [
	                'echarts',
	                'echarts/chart/gauge' // 使用柱状图就加载bar模块，按需加载
	            ],
	            function (ec) {
	                // 基于准备好的dom，初始化echarts图表
	                var myChart = ec.init(document.getElementById('main')); 
	                var option = {
	                	    tooltip : {
	                	        formatter: "{a} <br/>{c} {b}"
	                	    },
	                	    toolbox: {
	                	        show : false/* ,
	                	        feature : {
	                	            mark : {show: true},
	                	            restore : {show: true},
	                	            saveAsImage : {show: true}
	                	        } */
	                	    },
	                	    series : [
	                	        {
	                	        	
	                	            name:'车速',
	                	            type:'gauge',
	                	            min:0,
	                	            max:200,
	                	            splitNumber:10,
	                	            axisLine: {            // 坐标轴线
	                	                lineStyle: {       // 属性lineStyle控制线条样式
	                	                    width: 5
	                	                }
	                	            },
	                	            axisTick: {            // 坐标轴小标记
	                	                length :8,        // 属性length控制线长
	                	                lineStyle: {       // 属性lineStyle控制线条样式
	                	                    color: 'auto'
	                	                }
	                	            },
	                	            splitLine: {           // 分隔线
	                	                length :12,         // 属性length控制线长
	                	                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
	                	                    color: 'auto'
	                	                }
	                	            },
	                	            pointer: {
	                	                width:5
	                	            },
	                	            title : {
	                	                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
	                	                    fontWeight: 'bolder',
	                	                    fontSize: 20,
	                	                    fontStyle: 'italic'
	                	                }
	                	            },
	                	            detail : {
	                	                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
	                	                    fontWeight: 'bolder'
	                	                }
	                	            },
	                	            data:[{value: cs, name: '车速'}]
	                	        },
	                	        {
	                	            name:'电机转速',
	                	            type:'gauge',
	                	            center : ['17%', '55%'],    // 默认全局居中
	                	            radius : '50%',
	                	            min:0,
	                	            max:9,
	                	            endAngle:45,
	                	            splitNumber:3,
	                	            axisLine: {            // 坐标轴线
	                	                lineStyle: {       // 属性lineStyle控制线条样式
	                	                    width: 4
	                	                }
	                	            },
	                	            axisTick: {            // 坐标轴小标记
	                	                length :6,        // 属性length控制线长
	                	                lineStyle: {       // 属性lineStyle控制线条样式
	                	                    color: 'auto'
	                	                }
	                	            },
	                	            splitLine: {           // 分隔线
	                	                length :10,         // 属性length控制线长
	                	                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
	                	                    color: 'auto'
	                	                }
	                	            },
	                	            pointer: {
	                	                width:3
	                	            },
	                	            title : {
	                	                offsetCenter: [0, '-30%'],       // x, y，单位px
	                	            },
	                	            detail : {
	                	                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
	                	                    fontWeight: 'bolder'
	                	                }
	                	            },
	                	            data:[{value: zs, name: '电机转速'}]
	                	        },
	                	        {
	                	            name:'SOC',
	                	            type:'gauge',
	                	            center : ['83%', '55%'],    // 默认全局居中
	                	            radius : '50%',
	                	            min:0,
	                	            max:100,
	                	            startAngle:135,
	                	            splitNumber:4,
	                	            axisLine: {            // 坐标轴线
	                	                lineStyle: {       // 属性lineStyle控制线条样式
	                	                    width: 4,
	                	                    color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']]
	                	                }
	                	            },
	                	            axisTick: {            // 坐标轴小标记
	                	                length :6,        // 属性length控制线长
	                	                lineStyle: {       // 属性lineStyle控制线条样式
	                	                    color: 'auto'
	                	                }
	                	            },
	                	            splitLine: {           // 分隔线
	                	                length :10,         // 属性length控制线长
	                	                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
	                	                    color: 'auto'
	                	                }
	                	            },
	                	            pointer: {
	                	                width:3
	                	            },
	                	            title : {
	                	                offsetCenter: [0, '-20%'],       // x, y，单位px
	                	            },
	                	            detail : {
	                	                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
	                	                    fontWeight: 'bolder'
	                	                }
	                	            },
	                	            data:[{value: soc, name: 'SOC'}]
	                	        }
	                	    ]
	                	};
	                	clearInterval(timeTicket);
	                	timeTicket = setInterval(function (){
	                	    option.series[0].data[0].value = cs;
	                	    option.series[1].data[0].value = zs;
	                	    option.series[2].data[0].value = soc;
	                	    myChart.setOption(option,true);  
	                	},2000)
	        
	                // 为echarts对象加载数据 
	                myChart.setOption(option); 
	                
	            }
	        );
		}
  </script>
  <body>
  <table style="width: 100%;height:100%;">
  	<tr>
  		<td width="100%" height="60%"> 
  			<table style="width: 100%;height:100%;"  border="0" cellpadding="0" cellspacing="0" >
		 		<tr style="padding-top: 3%">
		 			<td width="30%" height="5%" align="center">车辆选择：</td>
		 			<td colspan="2" width="70%" align="center">
		 				<div class="ui-field-contain">
							<select name="vehicle_list" id="vehicle_list" onchange="">
							<option value="0">——请选择车辆——</option>
							</select>	
						</div>	
					</td>
		 		</tr>
		 		<tr>
		 			<td colspan="3" height="2%"></td>
		 		</tr>
		 		<tr style="height:5%;">
		 			<td width="50%" colspan="2" align="center"><div style="margin-top: 8%">总里程：<span id="total_mileage">0</span> km</div></td>
		 			<td width="50%" align="center"><div style="margin-top: 8%">续航里程：<span id="endurance_mileage">0</span> km</div></td>
		 		</tr>
		 		<tr>
		 			<td colspan="3" >
		 				<div id="main" style="height:99%;width:99%;float: left;"></div>
		 			</td>
		 		</tr>
		  </table>
  		</td>
  	</tr>
  	<tr>
  		<td width="100%" height="40%">
  			 <table style="width:100%;height:100%; border-collapse: collapse" border="1" bordercolor="#4b99cb" >
  			 <tr style="width:100%;">
  			 		<td colspan="2" ><div style="padding-left: 15%">数据时间：<span id="sensor_time"></span></div></td>
  			 	</tr>
  			 	<tr style="width:100%;">
  			 		<td>充电状态：<span id="charging_status">未充电</span></td>
  			 		<td>电机电流：<span id="motor_cur">0</span>A</td>
  			 	</tr>
  			 	<tr style="width:100%;">
  			 		<td>电机温度：<span id="motor_temp">0</span>℃</td>
  			 		<td>电机扭矩：<span id="motor_nm">0</span>NM</td>
  			 	</tr>
  			 	<tr style="width:100%;">
  			 		<td>电池总电压：<span id="bat_total_vol">0</span>V</td>
  			 		<td>电池总电流：<span id="bat_total_cur">0</span>A</td>
  			 	</tr>
  			 	<tr style="width:100%;">
  			 		<td>最高单体电压：<span id="bat_max_vol">0</span>V</td>
  			 		<td>最低单体电压：<span id="bat_min_vol">0</span>V</td>	
  			 	</tr>
  			 	<tr style="width:100%;">
  			 		<td>最高电池温度：<span id="batpage_max_temp">0</span>℃</td>
  			 		<td>最低电池温度：<span id="batpage_min_temp">0</span>℃</td>
  			 	</tr>
  			 </table>
  		</td>
  	</tr>
  </table>
  
 
  </body>
</html>
